<template>
    <div class="layout-pd">
        <el-card shadow="hover" header="字典配置">
            <splitpanes class="default-theme">
                <pane :size="30" class="pane-left">
                    <el-scrollbar height="600px">
                        <el-row>
                            <div class="mb8" style="width: 100%;padding-top: 5px">
                                <el-button type="success" plain class="ml10" @click="dicDialogRef.openDialog('add')">
                                    <el-icon>
                                        <ele-FolderAdd/>
                                    </el-icon>
                                    新增字典
                                </el-button>
                                <el-button type="primary" plain @click="handleRefreshCache()" class="ml10">
                                    <el-icon>
                                        <ele-RefreshLeft/>
                                    </el-icon>
                                    刷新缓存
                                </el-button>
                                <div class="dict-search">
                                    <el-input size="default" clearable>
                                        <template #suffix>
                                            <el-icon>
                                                <ele-Search/>
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                        </el-row>
                        <el-tree-v2 :data="roots" :props="props" style="height: 100%;"
                                    @node-click="dictChange">
                            <template #default="{ node, data }">
                           <span class="dict-root">
                             <span class="dict-label">{{ node.label }}</span>
                             <span class="dict-button">
                               <el-button size="default" link class="ml10"
                                          @click="dicDialogRef.openDialog('edit', data)">
                                   <el-icon><ele-FolderAdd/></el-icon>
                                   修改
                               </el-button>
                               <el-button size="default" link class="ml10" @click="removeHandle(data)">
                                   <el-icon><ele-FolderDelete/></el-icon>
                                   删除
                               </el-button>
                             </span>
                             <span class="dict-value">{{ data.code }}</span>
                           </span>
                            </template>
                        </el-tree-v2>
                    </el-scrollbar>
                </pane>
                <pane :size="70" class="pane-right">
                    <div class="system-user-search mb15">
                        <el-button size="default" type="success" class="ml10"
                                   @click="dicDialogRef.openDialog('addItem',currentRoots)">
                            <el-icon>
                                <ele-FolderAdd/>
                            </el-icon>
                            新增
                        </el-button>
                    </div>
                    <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                        <el-table-column align="center" type="selection" width="55"/>
                        <el-table-column type="index" label="序号" width="80"/>
                        <el-table-column align="center" prop="dictKey" label="字典键值"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" prop="dictValue" label="字典名称"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" prop="remark" label="字典描述"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" prop="sortOrder" label="排序"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" label="操作" width="180">
                            <template #default="scope">
                                <el-button size="small" text type="primary"
                                           @click="dicDialogRef.openDialog('editItem', scope.row)">修改
                                </el-button>
                                <el-button size="small" text type="primary" @click="removeHandle(scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="onHandleSizeChange"
                            @current-change="onHandleCurrentChange"
                            class="mt15"
                            :page-sizes="[10, 20, 30]"
                            v-model:current-page="state.tableData.param.pageNum"
                            background
                            v-model:page-size="state.tableData.param.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total"
                    >
                    </el-pagination>
                </pane>
            </splitpanes>
        </el-card>
        <DicDialog ref="dicDialogRef" @refresh="refreshData()"/>
    </div>
</template>

<script setup lang="ts" name="dict">
import {defineAsyncComponent, onMounted, reactive, ref} from 'vue';
import {Pane, Splitpanes} from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import DictApi from "/@/api/system/DictApi";
import {ElMessage, ElMessageBox} from "element-plus";


// 引入组件
const DicDialog = defineAsyncComponent(() => import('/@/views/system/dic/dialog.vue'));


// 定义变量内容
const dicDialogRef = ref();
const state = reactive({
    tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
            page: 1,
            limit: 10,
            parentId: ''
        },
    },
});

const props = {
    id: 'id',
    value: 'code',
    label: 'dictValue',
}
const removeHandle = (data: RowDicType) => {
    ElMessageBox.confirm(`此操作将永久删除字典名称：“${data.dictValue}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            getDictItemData();
            ElMessage.success('删除成功');
        })
        .catch(() => {
        });
}
const getDictItemData = () => {
    state.tableData.loading = true
    DictApi.getPage(state.tableData.param).then(res => {
        state.tableData.data.length = 0
        const {records, total} = res.data
        state.tableData.data = records
        state.tableData.total = total
    }).finally(() => [
        state.tableData.loading = false
    ])
}
const roots = ref([])
const getDictData = () => {
    DictApi.getList({parentId: '0'}).then(res => {
        roots.value = res.data
    })
}
const currentRoots = ref<RowDicType>()
const dictChange = (data: RowDicType) => {
    currentRoots.value = data
    state.tableData.param.parentId = data.id
    getDictItemData()
}
const refreshData = () => {
    getDictData()
    getDictItemData()
}

const handleRefreshCache = () => {

}
const onHandleSizeChange = () => {

}
const onHandleCurrentChange = () => {

}
onMounted(() => {
    getDictData()
})
</script>

<style scoped lang="scss">
.dict-root {
  width: 100%;
}

.dict-label {
  float: left;
  width: 100px;
}

.dict-value {
  padding-right: 20px;
  float: right;
}

.dict-button {
  padding-left: 20px;
}

.pane-left {
  background: white !important;
}

.pane-right {
  background: white !important;
}

.dict-search {
  margin-top: 10px;
  padding-left: 10px;
  width: 250px;
}

</style>